$table: $grey-dark;
$table-background: $light;
$table-border: $grey-light;
$table-head: $grey;
$table-row-hover-background: $grey-light;

table {
  background-color: $table-background;
  color: $table;
  margin: 2rem auto;
  width: 100%;
  border-collapse: collapse;
  border-radius: $radius-large;

  td,
  th {
    border: 1px solid $table-border;
    border-width: 0 0 1px;
    padding: 0.5em 0.75em;
    vertical-align: center;
  }

  th {
    color: $text-strong;
  }

  tr {
    &:hover {
      background-color: $table-row-hover-background;
    }
  }

  thead {
    td,
    th {
      border-width: 0 0 2px;
      color: $table-head;
    }
  }

  tfoot {
    td,
    th {
      border-width: 2px 0 0;
      color: $table-head;
    }
  }

  tbody {
    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 0;
        }
      }
    }
  }

  // Make border-radius
  tr:first-child th:first-child {
    border-top-left-radius: $radius-large;
  }
  tr:first-child th:last-child{
    border-top-right-radius: $radius-large;
  }
  tr:last-child td:first-child{
    border-bottom-left-radius: $radius-large;
  }
  tr:last-child td:last-child{
    border-bottom-right-radius: $radius-large;
  }
}
